9. Flexbox Layout

I. Flex Container & Items

Explanation: Flexbox ek powerful layout tool hai jo container ke andar ke items ko horizontally ya vertically arrange karta hai.

Important: Parent ko display: flex dene se wo container ban jata hai aur uske andar ke elements "flex items".

<style> .container { display: flex; background: lightgray; gap: 10px; padding: 10px; } .box { background: #007bff; color: white; padding: 20px; flex: 1; text-align: center; border-radius: 8px; } </style> <div class="container"> <div class="box">Item 1</div> <div class="box">Item 2</div> <div class="box">Item 3</div> </div> Run Code

II. Main Axis & Cross Axis

Explanation: Flexbox me 2 axis hote hain — Main Axis (direction of flex items) and Cross Axis (opposite direction).
flex-direction se hum main axis ko control karte hain.

<style> .container { display: flex; flex-direction: column; background: #fce4ec; padding: 10px; gap: 10px; } .item { background: #ec407a; color: white; padding: 15px; text-align: center; border-radius: 8px; } </style> <div class="container"> <div class="item">Box A</div> <div class="item">Box B</div> <div class="item">Box C</div> </div> Run Code

III. Flex Properties

Common Properties:
justify-content → Horizontal alignment (main axis)
align-items → Vertical alignment (cross axis)
gap → Space between items

<style> .container { display: flex; justify-content: center; align-items: center; height: 200px; background: #e0f7fa; gap: 20px; } .item { background: #00acc1; color: white; padding: 20px; border-radius: 10px; } </style> <div class="container"> <div class="item">A</div> <div class="item">B</div> </div> Run Code

IV. Practical Layout Example

Example: Responsive Navigation Layout using Flexbox:

<style> .navbar { display: flex; justify-content: space-between; align-items: center; background: #333; color: white; padding: 15px 20px; } .logo { font-size: 20px; font-weight: bold; } .menu { display: flex; gap: 15px; } .menu a { color: white; text-decoration: none; } </style> <div class="navbar"> <div class="logo">MySite</div> <div class="menu"> <a href="#">Home</a> <a href="#">Courses</a> <a href="#">About</a> </div> </div> Run Code